<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js获取元素</title>
  <script>
    window.onload=function(){
      var oDiv = document.getElementById('item');
      console.log(oDiv);
      // js 可以通过style属性来给元素设置样式
      oDiv.style.width="200px";
      oDiv.style.height="200px";
      oDiv.style.backgroundColor="red";
      oDiv.style.fontSize="40px";
      // 设置样式时，有些双拼词如font-size，需要把横杠去掉，然后把第二个单词首字母大写，即fontSize
      // 操作元素文本的内容 innerHTML，获取内容时会解析标签，innerText只能获取纯文本
      // 会覆盖之前的内容
      oDiv.innerHTML='<h1>233</h1>';
      oDiv.innerText='<h1>233</h1>';
      // 表单值操作，获取表单值
      V1 = document.getElementById('uname');
      console.log(V1);
      // 获取表单的值，元素对象，value
      console.log(V1.value);
      // 设置表单的值，格式value='要设置的值'；
      V1.value = '777';
    }
  </script>
</head>
<body>
  <div id="item">777</div>
  <!--<script>
    // 获取元素对象
    var oDiv = document.getElementById('item');
    console.log(oDiv);
  </script-->
  <input type="text" value="123" name="username" id="uname">
</body>
</html>
